<template>
	<view class="uiwu">
		<uiwu-list v-if="listData.length" :loading="more">
			<view class="uiwu-list">
				<view class="uiwu-list-item uiwu-flex-space" v-for="(item, index) in listData" :key="index">
					<image :src="item.product_image" mode="aspectFill"></image>
					<view class="in uiwu-flex-column">
						<view class="uiwu-flex-space">
							<text class="title uiwu-hidden2">{{ item.product_name }}</text>
							<view v-if="item.appeal_state == 0" class="status" :class="item.state != 0 ? 'active' : ''">
								{{ item.state == 0 ? '抓取失败' : '成功抓中' }}</view>
							<view v-else class="status" :class="item.appeal_state != 3 ? 'active' : ''">
								{{ item.appeal_state == 1 ? '审核中' : item.appeal_state == 2 ? '申诉成功' : '申诉驳回' }}
							</view>
						</view>
						<view class="uiwu-flex-space">
							<text class="time">{{ uiwu.formatTimestamp(item.add_time * 1000) }}</text>
							<text class="btn" @tap.stop="tapItem(item)"
								v-if="item.appeal_state == 0 && item.state == 0">申诉</text>
						</view>
					</view>

				</view>
			</view>
		</uiwu-list>
		<view v-else class="notedata uiwu-flex-column uiwu-flex-center">
			<image src="@/static/image/blank-space.png" mode="widthFix"></image>
			<text>最近7天内没有游戏记录</text>
			<view class="uiwu-flex-center" @tap="goHomeBack">去玩游戏</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { grablist, uiwu } from '@/api/interface/interface';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { inject, ref } from "vue";

const listData = ref<Array<object>>([])
const pageNum = ref<number>(1)
const more = ref<string>('loading');
const isLock = ref<boolean>(true)
const device_id = ref('')
/**
 * tapItem 选择
 */
const tapItem = (item): void => {
	const { appeal_valid, product_image, product_name, id, add_time, appeal_state } = item
	const guoqishijian = appeal_valid - Math.abs(getDay(item.expire_time))
	if (guoqishijian > 0) {
		if (device_id.value || device_id.value == 'string') {
			uni.$emit('complaintCallback', {
				name: product_name,
				img: product_image,
				id,
				add_time,
				appeal_state
			})
			uni.navigateBack()
		} else {
			uni.navigateTo({
				url: `/pages/index/complaint?goods=${JSON.stringify({
					name: product_name,
					img: product_image,
					id,
					add_time,
					appeal_state
				})}`
			})
		}
		return
	}
	uiwu.toast(`超出${Math.abs(guoqishijian)}天的记录不支持申诉哦~`)//不超出就是back回上一层 携带当前选中id
}
const getDay = (time) => {
	const currentTimestamp = Math.floor(Date.now() / 1000);
	const daysDifference = time - currentTimestamp
	return Math.floor(daysDifference / (60 * 60 * 24)) || 0
}
const getgrablist = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	const { data: { data, total } } = await grablist({
		page: pageNum.value,
		device_id: device_id.value
	})
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}
const goHomeBack = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
onReachBottom(() => {
	if (!isLock.value) return
	isLock.value = false
	pageNum.value++
	getgrablist(true)
})
onLoad((e) => {
	if (e?.device_id && e?.device_id != 'undefined') device_id.value = e.device_id
	getgrablist()
})
</script>

<style lang="scss">
page {
	background-color: #F6F6F6;
}

.uiwu {
	padding: 20rpx 0;
}

.uiwu-list {
	padding: 0 24rpx;
	background-color: #fff;

	&-item {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		&:last-child {
			border-bottom: 0;
		}

		image {
			width: 108rpx;
			height: 108rpx;
			border-radius: 16rpx;
		}

		.in {
			flex: 1;
			padding: 0 24rpx;
			height: 100%;

			.title {
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;
			}

			.time {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-weight: 300;
				color: #999999;
			}

			.btn {
				background: $qj-red;
				border-radius: 20rpx;
				padding: 0 20rpx;
				color: #FFF;
				font-size: 24rpx;
				height: 38rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
			}
		}

		.status {
			font-size: 24rpx;
			font-weight: 500;
			color: $qj-red;

			&.active {
				color: #5BB431;
			}
		}
	}
}

.notedata {
	width: 100%;
	height: 100vh;

	image {
		width: 220rpx;
	}

	text {
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;
		margin-top: 10rpx;
	}

	view {
		width: 300rpx;
		height: 80rpx;
		background: $qj-red;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
}
</style>
